<template>
	<div class="agentStatus-container">
		<el-tabs v-model="activeName">
			<el-tab-pane label="坐席状态日志" name="agentStatus">
				<Search :searchType="activeName" :groupOptions="groupOptions" @searchData="searchData" />
				<Table :tableData="tableData" class="agentStatus-table"> </Table>
				<PageSize class="page" :pages="selectAgentStatusList.pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import Search from './components/Search.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import { getAgentStatsuLogList, getGroupsListWithOrg } from '@/api/api';
import { mapState } from 'vuex';
import moment from 'moment';
export default {
	name: 'APP',
	components: {
		Search,
		Table,
		PageSize
	},
	data() {
		return {
			selectAgentStatusList: {
				startTime: '',
				endTime: '',
				agentId: '',
				status: '',
				group: '',
				pages: { page: 1, pageSize: 10, total: 0 }
			},
			activeName: 'agentStatus',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '坐席用户名',
						prop: 'agentId'
					},
					{
						label: '状态',
						prop: 'status'
					},
					{
						label: '开始时间',
						prop: 'stratTime'
					},
					{
						label: '结束时间',
						prop: 'endTime'
					},
					{
						label: '时长',
						prop: 'duration'
					}
				],
				tableConent: [], //坐席状态数据
				showIndex: false,
				showCheck: false,
				stripe: false
			},
			groupOptions: []
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.login.userInfo
		})
	},
	methods: {
		async getAgentStatusLogData() {
			const params = {
				groupId: this.selectAgentStatusList.group,
				status: this.selectAgentStatusList.status,
				userName: this.selectAgentStatusList.agentId,
				startTime: this.selectAgentStatusList.startTime,
				endTime: this.selectAgentStatusList.endTime,
				page: this.selectAgentStatusList.pages.page,
				pageSize: this.selectAgentStatusList.pages.pageSize
			};
			try {
				const { data } = await getAgentStatsuLogList(params);
				console.log(data, 'getAgentStatsuLogList result');
				if (data.code === 200) {
					this.selectAgentStatusList.pages.total = data.message.count;
					this.tableData.tableConent = data.message.data.map(item => {
						return {
							agentId: item.agentName ? item.agentName : '- -',
							status: this.filterAgentStatus(item.status),
							stratTime: item.at ? this.$moment(item.at).format('YYYY-MM-DD HH:mm:ss') : '- -',
							endTime: item.updatedAt ? this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss') : '- -',
							duration:
								item.at && item.updatedAt
									? this.calculationDuration(this.$moment(item.at).format('YYYY-MM-DD HH:mm:ss'), this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
									: '- -'
						};
					});
				} else {
					this.$message.error('获取坐席状态日志失败');
				}
			} catch (error) {
				console.log(error);
				this.$requestApiError(error, () => {
					this.$router.push('/');
				});
			}
		},

		//计算时长
		calculationDuration(stratTime, endTime) {
			const time = this.$moment(endTime).diff(this.$moment(stratTime), 'seconds');
			let days = parseInt(time / (60 * 60 * 24));
			let h = parseInt((time % (60 * 60 * 24)) / (60 * 60)) + days * 24;
			h = h < 10 ? '0' + h : h;
			let m = parseInt((time / 60) % 60);
			m = m < 10 ? '0' + m : m;
			let s = parseInt(time % 60);
			s = s < 10 ? '0' + s : s;
			// 作为返回值返回
			return h + ':' + m + ':' + s;
		},

		filterAgentStatus(status) {
			switch (status) {
				case 'offline':
					return '下线';
				case 'notReady':
					return '示忙';
				case 'ready':
					return '示闲';
				case 'ringing':
					return '振铃中';
				case 'serving':
					return '会话中';
				case 'afterWork':
					return '话后整理';
				case 'otherWork':
					return '小休';
				default:
					return '- -';
			}
		},

		searchData(data) {
			console.log('agentStatus search data', data);
			const { agentId, group, endTime, startTime, status } = data;
			this.selectAgentStatusList.group = group;
			this.selectAgentStatusList.agentId = agentId;
			this.selectAgentStatusList.endTime = endTime;
			this.selectAgentStatusList.startTime = startTime;
			this.selectAgentStatusList.status = status;
			this.selectAgentStatusList.pages.page = 1;
			this.selectAgentStatusList.pages.pageSize = 10;
			this.getAgentStatusLogData();
		},
		changePageSize(val) {
			this.selectAgentStatusList.pages.pageSize = val;
			this.selectAgentStatusList.pages.page = 1;
			this.getAgentStatusLogData();
		},
		changeCurrentPage(val) {
			this.selectAgentStatusList.pages.page = val;
			this.getAgentStatusLogData();
		},
		async getGroupListWithOrgData() {
			try {
				const { data } = await getGroupsListWithOrg(this.userInfo.org);
				console.log(data, 'getGroupsListWithOrg result');
				if (data.length > 0) {
					this.groupOptions = data.map(item => {
						return {
							value: item.id,
							label: item.name
						};
					});
				} else {
					this.$message.error('获取分组列表失败');
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取分组列表失败');
			}
		}
	},
	created() {},
	mounted() {
		this.getAgentStatusLogData();
		// this.getGroupListWithOrgData();
	}
};
</script>
<style scoped lang="less">
.agentStatus-container {
	.page {
		margin-top: 15px;
	}
}
</style>

<style lang="less">
.agentStatus-table {
	.el-table__header {
		tr {
			th {
				background: #f8f8f9 !important;
			}
		}
	}
}
</style>
